<template>
	<view class="page">
		<FoodCategory @select="onCategorySelect"/>
		<FlashSale @select="onFlashSaleSelect"/>

		<view class="store-list">
			<view class="filter-tabs">
				<scroll-view scroll-x class="tabs-scroll">
					<view
						class="tab"
						v-for="tab in tabs"
						:key="tab.value"
						:class="{active: activeTab === tab.value}"
						@tap="activeTab = tab.value">
						{{tab.label}}
					</view>
				</scroll-view>
			</view>

			<FilterOptions @filter-change="onFilterChange"/>

			<scroll-view
				scroll-y
				class="store-items"
				@scrolltolower="loadMore"
				:style="{height: scrollHeight + 'px'}"
				refresher-enabled
				@refresherrefresh="onRefresh"
				:refresher-triggered="isRefreshing">
				<view class="store-item" v-for="(item, index) in storeList" :key="index" @tap="onStoreSelect(item)">
					<image class="store-image" :src="item.image" mode="aspectFill"></image>
					<view class="store-info">
						<view class="name-wrap">
							<text class="name">{{item.name}}</text>
							<view class="tags">
								<text class="tag" v-for="(tag, idx) in item.tags" :key="idx">{{tag}}</text>
							</view>
						</view>
						<view class="rating">
							<uni-rate :value="item.rating" size="14" disabled/>
							<text class="score">{{item.rating}}</text>
							<text class="order-count">月售{{item.orderCount}}单</text>
						</view>
						<view class="price-info">
							<view class="price">
								<text class="average">¥{{item.averagePrice}}/人</text>
								<text class="distance">{{item.distance}}km</text>
							</view>
							<view class="promotions" v-if="item.promotions && item.promotions.length">
								<text class="promotion-tag" v-for="(promo, idx) in item.promotions" :key="idx">{{promo}}</text>
							</view>
						</view>
					</view>
				</view>

				<uni-load-more :status="loadMoreStatus"/>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue';
import {onLoad, onShow} from "@dcloudio/uni-app";
import request from "/common/api.js"
import FoodCategory from '../../components/common/FoodCategory.vue'
import FlashSale from '../../components/common/FlashSale.vue'
import FilterOptions from '../../components/common/FilterOptions.vue'

const tabs = [
		{ label: '推荐', value: 'recommend' },
		{ label: '火锅', value: 'hotpot' },
		{ label: '烧烤烤肉', value: 'bbq' },
		{ label: '地方菜系', value: 'local' },
		{ label: '异域料理', value: 'foreign' },
		{ label: '自助餐', value: 'buffet' }
	]

	const storeList = ref([])
	const activeTab = ref('recommend')
	const page = ref(1)
	const loadMoreStatus = ref('more')
	const isRefreshing = ref(false)
	const scrollHeight = ref(0)

	// 查询参数
	const queryParams = ref({
		keyword: '',
		category: '',
		distance: '',
		sort: '',
		price: {
			min: '',
			max: ''
		},
		promotions: []
	})

	onShow(() => {
		loadData()
	})

	onLoad(() => {
		loadData()
	})

	const loadData = async (isRefresh = false) => {
		if (isRefresh) {
			page.value = 1
			storeList.value = []
		}

		try {
			loadMoreStatus.value = 'loading'
			const params = {
				page: page.value,
				tab: activeTab.value,
				...queryParams.value
			}

			const res = await request.loadPostData("/appMenu/list", params)
			if (res && res.data) {
				if (isRefresh) {
					storeList.value = res.data
				} else {
					storeList.value = [...storeList.value, ...res.data]
				}

				loadMoreStatus.value = res.data.length < 10 ? 'noMore' : 'more'
			}
		} catch (error) {
			console.error('加载数据失败:', error)
			loadMoreStatus.value = 'more'
		}

		if (isRefresh) {
			isRefreshing.value = false
		}
	}

	const onSearch = (keyword) => {
		queryParams.value.keyword = keyword
		loadData(true)
	}

	const onCategorySelect = (category) => {
		queryParams.value.category = category.value
		loadData(true)
	}

	const onFlashSaleSelect = (item) => {
		uni.navigateTo({
			url: `/pages/store/detail?id=${item.id}`
		})
	}

	const onFilterChange = (filters) => {
		Object.assign(queryParams.value, filters)
		loadData(true)
	}

	const loadMore = () => {
		if (loadMoreStatus.value === 'more') {
			page.value++
			loadData()
		}
	}

	const onRefresh = () => {
		isRefreshing.value = true
		loadData(true)
	}

	const onStoreSelect = (store) => {
		uni.navigateTo({
			url: `/pages/store/detail?id=${store.id}`
		})
	}
</script>

<style lang="scss" scoped>

	.page {
		width: 100vw;
		background: #F5F5F5;
	}

	.store-list {
		margin-top: 10px;
		background: #fff;

		.filter-tabs {
			border-bottom: 1px solid #eee;

			.tabs-scroll {
				white-space: nowrap;
				padding: 0 15px;
			}

			.tab {
				display: inline-block;
				padding: 12px 15px;
				font-size: 14px;
				color: #666;
				position: relative;

				&.active {
					color: #FF5722;
					font-weight: bold;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 20px;
						height: 2px;
						background: #FF5722;
						border-radius: 1px;
					}
				}
			}
		}

		.store-items {
			padding: 15px;

			.store-item {
				display: flex;
				margin-bottom: 15px;
				padding-bottom: 15px;
				border-bottom: 1px solid #eee;

				&:last-child {
					margin-bottom: 0;
					padding-bottom: 0;
					border-bottom: none;
				}

				.store-image {
					width: 80px;
					height: 80px;
					border-radius: 4px;
					margin-right: 12px;
				}

				.store-info {
					flex: 1;

					.name-wrap {
						margin-bottom: 8px;

						.name {
							font-size: 16px;
							font-weight: bold;
							color: #333;
						}

						.tags {
							margin-top: 4px;

							.tag {
								font-size: 12px;
								color: #666;
								background: #f5f5f5;
								padding: 2px 6px;
								border-radius: 2px;
								margin-right: 6px;
							}
						}
					}

					.rating {
						display: flex;
						align-items: center;
						margin-bottom: 8px;

						.score {
							margin: 0 8px;
							color: #FF5722;
							font-size: 14px;
						}

						.order-count {
							color: #999;
							font-size: 12px;
						}
					}

					.price {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.average {
							color: #666;
							font-size: 14px;
						}

						.distance {
							color: #999;
							font-size: 12px;
						}
					}
				}
			}
		}
	}
</style>
